﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://cdn.kendostatic.com/2013.3.1316/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1316/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1316/styles/kendo.dataviz.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.3.1316/styles/kendo.dataviz.default.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1316/js/kendo.all.min.js"></script>

    @*Html.AppendScriptParts("http://cdn.kendostatic.com/2013.3.1316/js/kendo.all.min.js");
    Html.AppendCssFileParts("http://cdn.kendostatic.com/2013.3.1316/styles/kendo.common.min.css");
    Html.AppendCssFileParts("http://cdn.kendostatic.com/2013.3.1316/styles/kendo.default.min.css");
    Html.AppendCssFileParts("http://cdn.kendostatic.com/2013.3.1316/styles/kendo.dataviz.css");
    Html.AppendCssFileParts("http://cdn.kendostatic.com/2013.3.1316/styles/kendo.dataviz.default.css");*@


</head>
<body>
    <script>
        $(document).ready(function() {
            $("#pick").change(function () {
                var backHours = this.value;
                var numberOfColumns = backHours * 12;
                var StepColumns = (numberOfColumns < 100) ? 1 : (backHours / 2);
                createChart(backHours,StepColumns);
            });

         
        });
    </script>
    <div class="k-content absConf">
        <div class="chart-wrapper" style="margin: auto;text-align:center;">
            <div style="float:left;position:absolute;">
                    <img src="~/Themes/Windalert/Content/images/logo.png" />
            </div>
            <h1>@ViewBag.SpotName</h1>
            Wind 
            <select id="pick">
                <option value="2">2</option>
                <option value="6">6</option>
                <option value="12">12</option>
                <option value="24" selected>24</option>
            </select>
            Hours
            <div id="chart"></div>
        </div>
        <script> 
            function createChart(backHours, stepX) {
                $("#chart").kendoChart({
                    dataSource: {
                        transport: {
                            read: {
                                url: '@Url.Action("WindChartJson", "WSpot")',
                                data: { "spotId": @ViewBag.SpotId, "backHours": backHours },
                                dataType: "json"
                            }
                        },
                        sort: {
                            field: "Time",
                            dir: "asc"
                        }
                    },
                    
                    legend: {
                        position: "top"
                    },
                    seriesDefaults: {
                        type: "line",
                        missingValues: "gap",
                    },
                    series: [{
                        field: "Speed",
                        name: "Wind speed",
                        color: "#2e4283"
                    }, {
                        field: "Gust",
                        name: "Wind gust",
                        color: "#f61313",
                        type:"area"
                    }],
                    categoryAxis: {
                        field: "Time",
                        labels: {
                            rotation: -90,
                            step: stepX,
                            visible: true
                        }
                    },
                    valueAxis: {
                        labels: {
                            format: "{0} knots"
                        },
                        max: 40,
                        line: {
                            visible: false
                        },
                        minorGridLines: {
                            visible: true
                        }
                    },
                    tooltip: {
                        visible: true,
                        shared: true,
                        format: "{0} Knots",
                        color: "#fff",
                        background: "#575353",
                    }
                });
            }

            
            $(document).ready(createChart(24,14));
            $(document).bind("kendo:skinChange", createChart);
            
        </script>
    </div>


</body>
</html>